// pages/bar/bar.js
import * as echarts from '../../ec-canvas/echarts';

const app = getApp();

//初始化图表  仪表盘 展示评测比例
function initGaugeChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    color: ["#37A2DA", "#32C5E9", "#67E0E3"],
    series: [{
      name: '测评指标',
      type: 'gauge',
      detail: {
        formatter: '{value}%'
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 30,
          shadowBlur: 0,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      data: [{
        value: 65.1,
        name: '评测率',
      }]

    }]
  };

  chart.setOption(option, true);
  return chart;
}

//初始化图表  饼图  展示得分区间
function initPieChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['40%', '60%'],
      data: [{
        value: 60,
        name: '优秀'
      }, {
        value: 20,
        name: '良好'
      }, {
        value: 20,
        name: '中等'
      }, {
        value: 15,
        name: '及格'
      }, {
        value: 5,
        name: '不及格'
      }]
    }]
  };

  chart.setOption(option);
  return chart;
}

//初始化图表  折线图  展示不同题目得分等地
function initLineChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    // title: {
    //   text: '不同评级人数变化',
    //   left: 'center'
    // },
    color: ["#37A2DA", "#67E0E3", "#9FE6B8","yellow","orange"],
    legend: {
      data: ['优', '良', '中','及格','不及格'],
      top: 50,
      left: 'center',
      backgroundColor: '#37A2DA',
      z: 100
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['题1', '题2', '题3', '题4', '题5', '题6', '题7','题8','题9','题10'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: '优',
      type: 'line',
      smooth: true,
      data: [18, 36, 65, 30, 48, 40, 33,2,4,15]
    }, {
      name: '良',
      type: 'line',
      smooth: true,
      data: [12, 50, 51, 35, 30, 30, 20,23,45,6]
    }, {
      name: '中',
      type: 'line',
      smooth: true,
      data: [10, 30, 31, 50, 40, 20, 10,4,7,3]
    }, {
      name: '及格',
      type: 'line',
      smooth: true,
      data: [5, 14, 7, 8, 21, 4, 5,2,4,6,34,21,15]
    }, {
      name: '不及格',
      type: 'line',
      smooth: true,
      data: [4, 20, 3, 5, 20, 30, 22,4,14,24]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  // onShareAppMessage: function (res) {
  //   return {
  //     title: 'ECharts 可以在微信小程序中使用啦！',
  //     path: '/pages/index/index',
  //     success: function () { },
  //     fail: function () { }
  //   }
  // },
  data: {
    ecGauge: {
      onInit: initGaugeChart
    },
    ecPie:{
      onInit:initPieChart
    },
    ecLine:{
      onInit:initLineChart
    }
  },
  showModal(e) {
    this.setData({
      modalName: e.currentTarget.dataset.target
    })
  },
  hideModal(e) {
    this.setData({
      modalName: null
    })
  },

  onReady() {
  }
  // onReady() {
  //   setTimeout(function () {
  //     // 获取 chart 实例的方式
  //     // console.log(chart)
  //   }, 2000);
  // }
});
